<template>
    <div :style="CustemStyle" class="label">
        <span class="font-13" :class="{'cursor-pointer':close==false}" @click="chooseLabel">#{{name}}</span>
        <i class="el-icon-close font-13 ml-4 cursor-pointer color-999" v-if="close" @click="remove"></i>
    </div>
</template>

<script>
export default {
    props: {
        index: {
            type: [String, Number],
            default: 0,
        },
        name: {
            type: [String, Number],
            default: '',
        },
        close: {
            type: Boolean,
            default: false,
        },
        color: {
            type: String,
            default: '#FF1C6D',
        },
    },
    computed: {
        CustemStyle() {
            return 'color:' + this.color
        },
    },
	methods:{
		remove(){
			this.$emit("remove",this.index)
		},
		chooseLabel(){
			if(!this.close){
				this.$emit("chooseLabel",this.name);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.label {
    border-radius: 20px;
    background: #f5f5f5;
    padding: 1px 12px;
	line-height: 20px;
}
</style>